import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  ScrollView,
  Platform,
  StyleSheet,
  Animated,
  DeviceEventEmitter,
} from 'react-native';
import {
  RTCPeerConnection,
  RTCSessionDescription,
  MediaStreamTrack,
  getUserMedia,
} from 'react-native-webrtc';
import InCallManager from 'react-native-incall-manager';
// import Animation from 'lottie-react-native';
import LinearGradient from 'react-native-linear-gradient';

import PxToDp from '../../../utils/PxToDp';
import FontFamilys from '../../../utils/FontFamilys';
import CommunicationHeader from './CommunicationHeader';
import Number from './Number';
import CommunicationSeat from './CommunicationSeat';
import ModalExt from '../../Public/ModalExt';
import EndCall from './EndCall';
import Prompt from '../details/Prompt';
import SwitchSettings from './SwitchSettings';
import VehicleInfo from './VehicleInfo';
import GuidePage from './IntroPage';

import fetchDealerInfo from '../../../actions/dealerInfoActions';
import { fetchCarInfo } from '../../../actions/communicateAction';
// import CommonStorage from '../../../utils/CommonStorage';

// 新的
/* global WS_URL */
/* global ws */
global.ws = null;
/* global pc */
global.pc = null;
let dealerId = '';
let factory = '';
let carid = '';
let username = '';
let id = '';
let salerId = '';

let dataNumber = [];

const dataSeat = [
  { id: 0, top: 190, left: 85, name: '主驾驶座', status: 0 },
  { id: 1, top: 190, left: 118, name: '副驾驶座', status: 0 },
  { id: 2, top: 236, left: 85, name: '后座', status: 0 },
  { id: 3, top: 236, left: 118, name: '后座', status: 0 },
];

const num0 = [{ id: 0, text: '前大灯设计' }];
const num1 = [{ id: 0, text: '车身尺寸' }, { id: 1, text: '轴距参数' }, { id: 2, text: '轮距参数' }];
const num2 = [{ id: 0, text: 'C柱设计' }];
const num3 = [{ id: 0, text: '尾灯设计' }];
const num4 = [{ id: 0, text: '后备箱参数' }, { id: 1, text: '旅行箱参数' }];
const num5 = [{ id: 0, text: '前格栅设计' }, { id: 1, text: '发动机参数' }];

const getLocalStream = (callback) => {
  MediaStreamTrack.getSources(() => {
    getUserMedia({
      audio: true,
      video: false,
    }, (stream) => {
      callback(stream);
    }, (err) => {
      throw err;
    });
  });
};

class ModalNum extends Component {
  render() {
    let num = [];
    if (this.props.numIndex === 0 || this.props.numIndex === 8) {
      num = num0;
    } else if (this.props.numIndex === 1 || this.props.numIndex === 7) {
      num = num1;
    } else if (this.props.numIndex === 2 || this.props.numIndex === 6) {
      num = num2;
    } else if (this.props.numIndex === 3 || this.props.numIndex === 5) {
      num = num3;
    } else if (this.props.numIndex === 4) {
      num = num4;
    } else if (this.props.numIndex === 9) {
      num = num5;
    }
    return (
      <View>
        {num.map(data => (
          <TouchableOpacity
            key={data.id}
            activeOpacity={0.6}
            onPress={() => this.props.onPress()}
            style={styles.numStyle}
          >
            <Text>{data.text}</Text>
          </TouchableOpacity>
          ))}
      </View>
    );
  }
}

class CommunicationOnline extends Component {
  constructor(props) {
    super(props);

    this.state = {
      numberSelected: [false, false, false, false, false, false, false, false, false],
      dropOutDisable: false,
      seatPress: [false, false, false, false],
      endCall: false,
      guidePage: false,
      r: 0, // 在线通话
      manualStop: false,
      factory: '',
      dealer: '',
      carid: '',
      numOne: false, // 数字模态框
      numSelect: '', // 选择数字
      progress: new Animated.Value(0),
      currentSee: '',
      pointNum: '',
      claimSale: false,
      showAnimation: true,
    };
  }

  _goBack() {
    this.props.navigator.pop();
    this._close();
  }

  _animation() {
    this.state.progress.setValue(0);
    Animated.timing(this.state.progress, {
      toValue: 1,
      duration: 2000,

    }).start(() => this._animation());
  }

  // 切换四个座椅
  switchSeat(index) {
    for (let i = 0; i < 4; i += 1) {
      if (i === index) {
        dataSeat[index].status = true;
      } else {
        dataSeat[i].status = false;
      }
    }
  }

 // 移除车外
  getOutCar() {
    if (ws) {
      ws.send(JSON.stringify({ transforminout: 'out' }));
    }
  }

  _seatPress(data, index) {
    console.log(data);
    const arr = [];
    // 该方法有待优化
    if (index === 0) {
      if (data.status) {
        dataSeat[index].status = false;
        this.getOutCar();
      } else {
        this.switchSeat(index);
        if (ws) {
          ws.send(JSON.stringify({ transforminout: 'main' }));
        }
      }
    } else if (index === 1) {
      if (data.status) {
        dataSeat[index].status = false;
        this.getOutCar();
      } else {
        this.switchSeat(index);
        if (ws) {
          ws.send(JSON.stringify({ transforminout: 'second' }));
        }
      }
    } else if (data.status) {
      dataSeat[index].status = false;
      this.getOutCar();
    } else {
      this.switchSeat(index);
      if (ws) {
        ws.send(JSON.stringify({ transforminout: 'back' }));
      }
    }
    for (let i = 0; i < 4; i += 1) {
      arr.push(dataSeat[i].status);
    }
    if (dataSeat[index].status) {
      this.setState({ dropOutDisable: true });
    } else {
      this.setState({ dropOutDisable: false });
    }
    this.setState({ seatPress: arr });
  }

  _numberSelected(index, ids, data) {
    this.setState({ pointNum: `${ids}点钟方向` });
    const arr = [];
    for (let i = 0; i < 10; i += 1) {
      arr.push(false);
    }
    if (index === data.index) {
      this._setNumVisible(true);
    }
    arr[index] = true;
    this.setState({ numSelect: index });
    this.setState({ numberSelected: arr });
    if (ws) {
      ws.send(JSON.stringify({ mainpos: ids }));
    }
  }

  _seatReset() {
    this.setState({ dropOutDisable: false });
    this.getOutCar();
    const arr = [];
    for (let i = 0; i < 4; i += 1) {
      dataSeat[i].status = false;
      arr.push(false);
    }
    this.setState({ seatPress: arr });
  }

  _setEndCallVisible(visible) {
    this.setState({ endCall: visible });
  }

  _setGuidePageVisible(visible) {
    this.setState({ guidePage: visible });
  }

  _setNumVisible(visible) {
    this.setState({ numOne: visible });
  }

  _goPrompt() {
    const { carInfo } = this.props;
    const car = carInfo ? carInfo.car ? carInfo.car : null : null;
    const terminology = car ? car.terminology ? car.terminology : null : null;
    this.props.navigator.push({
      component: Prompt,
      passProps: { terminology },
    });
  }

  _goSwitchSettings() {
    this.props.navigator.push({
      component: SwitchSettings,
    });
  }

  _goVehicleInfo() {
    const { user, dispatch, carInfo } = this.props;
    this.props.navigator.push({
      component: VehicleInfo,
      passProps: {
        user,
        carInfo,
        dispatch,
      },
    });
  }

  async componentWillMount() {
    const { user, dispatch } = this.props;
    console.log('user: ', user);
    dispatch(fetchCarInfo(user.id, (data) => {
      console.log('ddddd: ', data);
      if (data.err) {
        DeviceEventEmitter.emit('showToast', data.err);
      }
    }));

    dispatch(fetchDealerInfo((data) => {
      console.log('data', data);
      if (data && data.err) {
        DeviceEventEmitter.emit('showToast', data.err);
      } else {
        const { dealer, saler } = this.props.dealerInfo;
        dealerId = dealer && dealer.id;
        salerId = saler && saler.id;
        factory = user && user.factory_id;
        carid = user && user.car_id;
        username = user && user.username;
        id = user && user.id;

        if (factory && dealerId && carid) {
          this._openPcAndWs();
        }
      }
    }));
  }

  componentDidMount() {
    this._animation();
    InCallManager.start({ media: 'video' });
  }


  _openPcAndWs() {
    const wsUrl = `${WS_URL}?factory=${factory}&dealer=${dealerId}&carid=${carid}&r=${this.state.r}`;
    if (this.state.r === 0) {
      if (ws) {
        this._closeWs();
      }
    }

    if (pc) {
      this._closePc();
    }

    ws = new WebSocket(wsUrl);
    pc = new RTCPeerConnection();

    this._openWs(() => {
      this._openPc();
    });
  }

  _openPc() {
    // audio
    pc.onicecandidate = (event) => {
      if (event.candidate) {
        const param = {
          type: 'candidate',
          sdpMLineIndex: event.candidate.sdpMLineIndex,
          sdpMid: event.candidate.sdpMid,
          candidate: event.candidate.candidate,
        };
        console.log('candidate param: ', param);
        if (!ws) {
          this._openPcAndWs();
        } else {
          ws.send(JSON.stringify(param));
        }
      }
    };

    pc.onaddstream = (event) => {
      console.log('onaddstream', event.stream);
    };

    pc.onremovestream = (event) => {
      console.log('onremovestream', event.stream);
    };

    setTimeout(() => {
      getLocalStream((stream) => {
        console.log('stream: ', stream);
        if (!pc) {
          return;
        }
        pc.addStream(stream);

        const offerOptions = {
          mandatory: {
            OfferToReceiveAudio: true,
            OfferToReceiveVideo: false,
            VoiceActivityDetection: true,
          },
        };
        pc.createOffer((desc) => {
          console.log('createOffer', desc);
          pc.setLocalDescription(desc, () => {
            console.log('setLocalDescription', pc.localDescription);
            if (!ws) {
              this._openPcAndWs();
            } else {
              ws.send(JSON.stringify({ type: 'offer', sdp: desc.sdp }));
            }
          }, (err) => {
            throw err;
          });
        }, (err) => {
          throw err;
        }, offerOptions);
      });
    }, 2000);
  }

  _close = () => {
    InCallManager.stop();
    this._closePc();
    if (ws) {
      ws.send(JSON.stringify({ type: 'bye' }));
      this._setManualStop(true, () => {
        this._closeWs();
      });
    }
  }

  _closePc() {
    if (pc) {
      pc.close();
      pc = null;
    }
  }
  _closeWs() {
    if (ws) {
      ws.close();
      ws = null;
    }
  }
  _openWs(cb) {
    const $this = this;
    ws.onopen = (e) => {
      console.log('open', e);
      const param = {
        type: 'ello',
        sdp: username,
        sdpMLineIndex: id,
        isSaler: true,
        saler_id: salerId,
      };
      if (ws) {
        ws.send(JSON.stringify(param));
      }
      if (cb) {
        cb();
      }
    };
  // 返回
    ws.onmessage = (e) => {
      console.log('在线沟通==', ws);
      console.log('onmessage: ', e);
      if (e.type === 'message') {
        if (e.data[0] === '{') {
          const data = JSON.parse(e.data);
          if (data.user_look) {
            if (data.user_look.body) {
              this.setState({
                currentSee: data.user_look.body,
              });
            } else if (data.user_look.color) {
              this.setState({
                currentSee: data.user_look.color,
              });
            } else if (data.user_look.glass) {
              this.setState({
                currentSee: data.user_look.glass,
              });
            } else if (data.user_look.wheelhub) {
              this.setState({
                currentSee: data.user_look.wheelhub,
              });
            }
          }
          if (data.type === 'answer') {
            if (pc) {
              pc.setRemoteDescription(new RTCSessionDescription(data), (msg) => {
                console.log('setRemoteDescription success: ', msg);
              }, (err) => {
                console.log('setRemoteDescription fail: ', err);
              });
            }
          }
          // 语音结束
          if (data.type === 'bye') {
            $this._setManualStop(true, () => {
              $this._closePc();
              $this._closeWs();
              $this._setModalSale(true);
              this.setState({ showAnimation: false });
            });
          }
          // 中途中断重连
          if (data.type === 'hangup') {
            if ($this.state.manualStop) {
              $this._setManualStop(false);
            }
            $this._closePc();
            pc = new RTCPeerConnection();
            $this._openPc();
          }
        }
      }
    };

    ws.onerror = (e) => {
      console.log('websocket onerror', e);
    };

    ws.onclose = (e) => {
      console.log('websocket onclose', e.code, e.reason);
      // 是否是手动结束
      if (!this.state.manualStop) {
        this.setState({
          r: this.state.r + 1,
        }, () => {
          if (ws) {
            ws = null;
          }
          this._openPcAndWs();
        });
      }
    };
  }

  _setManualStop(value, cb) {
    if (cb) {
      this.setState({
        manualStop: value,
      }, cb);
    } else {
      this.setState({
        manualStop: value,
      });
    }
  }

  _setModalSale(visible) {
    this.setState({ claimSale: visible });
  }

  componentWillUnmount() {
    this._close();
  }

  render() {
    const { user, navigator, dispatch, carInfo } = this.props;

    if (Platform.OS === 'ios') {
      dataNumber = [
        { id: 1, left: 244, top: -22, index: 0 },
        { id: 3, left: 291, top: 172, index: 1 },
        { id: 4, left: 291, top: 274, index: 2 },
        { id: 5, left: 244, top: 382, index: 3 },
        { id: 6, left: 125, top: 382, index: 4 },
        { id: 7, left: 15, top: 382, index: 5 },
        { id: 8, left: -17, top: 274, index: 6 },
        { id: 9, left: -17, top: 172, index: 7 },
        { id: 11, left: 15, top: -22, index: 8 },
        { id: 12, left: 125, top: -22, index: 9 },
      ];
    } else {
      dataNumber = [
         { id: 1, left: 244, top: -22, index: 0 },
         { id: 3, left: 291, top: 157, index: 1 },
         { id: 4, left: 291, top: 248, index: 2 },
         { id: 5, left: 244, top: 340, index: 3 },
         { id: 6, left: 125, top: 340, index: 4 },
         { id: 7, left: 15, top: 340, index: 5 },
         { id: 8, left: -18, top: 248, index: 6 },
         { id: 9, left: -18, top: 157, index: 7 },
         { id: 11, left: 15, top: -22, index: 8 },
         { id: 12, left: 125, top: -22, index: 9 },
      ];
    }
    return (
      <View style={[styles.flex, styles.wrapper, styles.titleTop]}>
        <View style={{ width: '100%' }}>
          <CommunicationHeader
            navigator={navigator}
            user={user}
            carInfo={carInfo}
            dispatch={dispatch}
            onPress={() => {
              this._setEndCallVisible(true);
            }
            }
          />


          <View style={styles.forceView}>
            <LinearGradient
              style={[styles.row, styles.focusWrapper]}
              colors={['#7b6aff', '#4cbbff']}
              start={{ x: 0, y: 1 }}
              end={{ x: 1, y: 1 }}
            >
              <View style={styles.forceCon}>
                <Text style={styles.forceText}>当前客户：</Text>
                <Text style={styles.forceValue}>{user && user.username ? user.username : ''}</Text>
              </View>
              <View style={styles.forceCon}>
                <Text style={styles.forceText}>用户当前关注：</Text>
                <Text style={styles.forceValue}>{this.state.currentSee}</Text>
              </View>
              <View style={styles.forceCon}>
                <Text style={styles.forceText}>销售当前展示：</Text>
                <Text style={styles.forceValue}>{this.state.pointNum}</Text>
              </View>
            </LinearGradient>
          </View>


          <ScrollView style={styles.mainWrapper}>
            <View style={[styles.centerView]}>
              <View style={[styles.main]}>
                <View style={[styles.frame]}>
                  <View style={[styles.carImage]}>
                    <Image
                      source={require('../../../img/online/olCar.png')}
                    />

                  </View>

                  { dataSeat.map((data, index) => (
                    <CommunicationSeat
                      key={data.id}
                      top={data.top}
                      left={data.left}
                      ifActive={this.state.seatPress[index]}
                      onPress={() => this._seatPress(data, index)}
                    />
                    ))
                  }
                  {
                    dataNumber.map((data, index) => (
                      <Number
                        key={data.id}
                        selected={this.state.numberSelected[index]}
                        value={data.id}
                        top={data.top}
                        left={data.left}
                        onPress={
                          () => {
                            this._numberSelected(index, data.id, data);
                          }
                        }
                      />
                      ))
                    }
                  <Text style={[styles.number]}>10</Text>
                  <Text style={[styles.number, { left: PxToDp(294) }]}>2</Text>
                  <TouchableOpacity
                    activeOpacity={0.6}
                    style={styles.dropout}
                    onPress={() => this._seatReset()}
                  >
                    {
                      this.state.dropOutDisable
                      ?
                        <View style={[styles.dropoutWrapper, styles.inCar]}>
                          <Image source={require('../../../img/online/dropout.png')} />
                        </View>
                      :
                        <View style={[styles.dropoutWrapper, styles.outCar]}>
                          <Image source={require('../../../img/online/dropoutDf.png')} />
                        </View>
                    }
                    <Text
                      style={this.state.moveOutDisable
                        ?
                         styles.disabledDropout
                        :
                         styles.dropoutText}
                    >
                       移出车外
                      </Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </ScrollView>
        </View>
        <View style={styles.bottomContainer}>
          <View style={[styles.bottom, styles.row]}>
            <TouchableOpacity
              activeOpacity={0.5}
              style={{ alignItems: 'center', marginTop: PxToDp(0) }}
              onPress={() => this._goVehicleInfo()}
            >
              <Image
                source={require('../../../img/online/carinfo.png')}
              />
              <Text style={[styles.bottomFont]}>车辆信息</Text>
            </TouchableOpacity>

            <TouchableOpacity
              activeOpacity={0.5}
              style={{ alignItems: 'center', marginTop: PxToDp(0) }}
              onPress={() => this._goSwitchSettings()}
            >
              <Image
                source={require('../../../img/online/online-set.png')}
              />
              <Text style={[styles.bottomFont]}>车辆改装</Text>
            </TouchableOpacity>

            <TouchableOpacity
              activeOpacity={0.5}
              style={{ alignItems: 'center', marginTop: PxToDp(-4) }}
              onPress={() => this._goPrompt()}
            >
              <Image
                source={require('../../../img/prompt.png')}
              />
              <Text style={[styles.bottomFont, { marginTop: PxToDp(2) }]}>销售话术</Text>
            </TouchableOpacity>
          </View>

        </View>
        <ModalExt
          onRequestClose={() => this._setEndCallVisible(false)}
          animationType={'slide'}
          transparent
          visible={this.state.endCall}
          onPress={() => this._setEndCallVisible(false)}
        >
          <EndCall
            Cancle={() => {
              this._setEndCallVisible(false);
            }}
            Confirm={() => {
              this._setEndCallVisible(false);
              this._goBack();
            }}
          />
        </ModalExt>
        <ModalExt
          onRequestClose={() => this._setGuidePageVisible(false)}
          animationType={'fade'}
          transparent
          visible={this.state.guidePage}
          onPress={() => this._setGuidePageVisible(false)}
        >
          <GuidePage
            onPress={() => {
              this._setGuidePageVisible(false);
            }}
          />
        </ModalExt>
        <ModalExt
          onRequestClose={() => this._setNumVisible(false)}
          animationType={'fade'}
          transparent
          visible={this.state.numOne}
          onPress={() => this._setNumVisible(false)}
        >
          <ModalNum
            numIndex={this.state.numSelect}
            onPress={() => this._setNumVisible(false)}
          />
        </ModalExt>
        <ModalExt
          style={styles.flex} onRequestClose={() => this._setModalSale(false)}
          animationType={'slide'} transparent visible={this.state.claimSale}
        >
          <View style={[styles.bgColor, styles.flex]}>
            <View style={[styles.modal]}>
              <View style={[styles.modalTitle]}>
                <Text style={[styles.modalContentText, { fontSize: PxToDp(20) }]}>
                  结束通话
                </Text>
              </View>
              <Text
                style={[styles.modalContentText, { width: PxToDp(256), marginTop: PxToDp(26) }]}
              >
                客户已经中断链接，您的操作和语音将不会被接收到。
              </Text>
              <View style={[styles.row, styles.modalBtn]}>
                <TouchableOpacity
                  style={[styles.flex, styles.center, styles.modalCancleBtn]}
                  onPress={() => this._goBack()}
                >
                  <Text style={styles.modalCancle}>离开当前页</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={[styles.flex, styles.center]}
                  onPress={() => this._setModalSale(false)}
                >
                  <Text style={styles.modalCommit}>留在页面</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </ModalExt>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  center: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  wrapper: {
    position: 'relative',
    justifyContent: 'space-between',
    backgroundColor: '#F9F9F9',
  },
  focusWrapper: {
    justifyContent: 'space-between',
    width: '100%',
    height: PxToDp(54),
    paddingTop: PxToDp(10),
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
    borderTopLeftRadius: PxToDp(8),
    borderTopRightRadius: PxToDp(8),
  },
  forceView: {
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
  },
  mainWrapper: {
    height: Platform.OS === 'ios' ? PxToDp(470) : PxToDp(390),
  },
  main: {
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    backgroundColor: '#fff',
    height: PxToDp(436),
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
    paddingTop: PxToDp(20),
  },
  frame: {
    width: '100%',
    borderColor: '#f1f4f8',
    borderWidth: PxToDp(25),
    height: Platform.OS === 'ios' ? PxToDp(430) : PxToDp(388),
  },
  carImage: {
    position: 'absolute',
    left: PxToDp(-25),
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: '100%',
  },
  number: {
    position: 'absolute',
    top: PxToDp(78),
    left: PxToDp(-20),
    color: '#5E5F89',
    backgroundColor: 'transparent',
    fontSize: PxToDp(16),
  },
  dropoutWrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    width: PxToDp(23.9),
    height: PxToDp(23.9),
    marginLeft: PxToDp(10),
    borderRadius: PxToDp(14),
    borderWidth: PxToDp(2),
  },
  outCar: {
    borderColor: '#458fff',
  },
  inCar: {
    borderColor: '#458fff',
    backgroundColor: '#458fff',
  },
  dropout: {
    position: 'absolute',
    top: Platform.OS === 'ios' ? PxToDp(176) : PxToDp(155),
    right: Platform.OS === 'ios' ? PxToDp(50) : PxToDp(43),
  },
  dropoutText: {
    marginTop: PxToDp(5),
    marginRight: PxToDp(6),
    color: '#5d5b87',
    fontSize: 11,
    fontWeight: 'bold',
  },
  disabledDropout: {
    color: '#ccc',
    fontSize: 11,
  },
  bottomContainer: {
    justifyContent: 'flex-end',
    backgroundColor: '#f8f8f9',
    borderColor: '#b7b7b7',
    borderWidth: PxToDp(0.5),
    borderStyle: 'solid',
  },
  bottom: {
    justifyContent: 'space-between',
    height: Platform.OS === 'ios' ? PxToDp(50) : PxToDp(50),
    paddingTop: PxToDp(10),
    paddingLeft: PxToDp(33),
    paddingRight: PxToDp(33),
    backgroundColor: '#fff',
  },
  bottomFont: {
    marginTop: PxToDp(4),
    color: '#999',
    fontSize: 12,
  },
  numStyle: {
    height: PxToDp(44),
    backgroundColor: '#FFF',
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modal: {
    alignItems: 'center',
    height: PxToDp(220),
    backgroundColor: '#fff',
    width: PxToDp(300),
    borderRadius: PxToDp(2),
    borderColor: '#F65252',
    borderTopWidth: PxToDp(3),
    borderStyle: 'solid',
  },
  bgColor: {
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: '#F65252',
  },
  modalTitle: {
    marginTop: PxToDp(21),
    alignItems: 'center',
  },
  modalContentText: {
    textAlign: 'center',
    fontFamily: FontFamilys(),
    fontSize: PxToDp(16),
    color: '#333',
  },
  modalBtn: {
    height: PxToDp(50),
    marginTop: PxToDp(48),
    width: PxToDp(300),
    borderColor: '#DDDDDD',
    borderTopWidth: PxToDp(1),
    borderStyle: 'solid',
  },
  modalCancle: {
    color: '#999',
    fontFamily: FontFamilys(),
    fontSize: PxToDp(18),
  },
  modalCommit: {
    color: '#333',
    fontFamily: FontFamilys(),
    fontSize: PxToDp(18),
  },
  modalCancleBtn: {
    borderColor: '#DDDDDD',
    borderRightWidth: PxToDp(1),
    borderStyle: 'solid',
  },
  centerView: {
    alignItems: 'center',
    width: '100%',
  },
  titleTop: {
    marginTop: Platform.OS === 'ios' ? PxToDp(20) : 0,
  },
  forceText: {
    color: '#c4d2ff',
    fontSize: PxToDp(12),
    fontFamily: FontFamilys(),
    backgroundColor: 'transparent',
  },
  forceValue: {
    color: '#ffffff',
    fontSize: PxToDp(12),
    fontFamily: FontFamilys(),
    marginTop: PxToDp(4),
    backgroundColor: 'transparent',
  },
  forceCon: {
    alignItems: 'flex-start',
  },
});

export default CommunicationOnline;
